<!--控制组件显示隐藏-->
<div class="layui-form-item media-box" id="media-box-{$form.name}">
    <style>
        .media-box .layui-card{padding-top: 30px;}
        .media-box .box{
            font-size: 16px;line-height: 80px;text-align: center;width: 90%;border: #e7e7eb 1px solid;margin-bottom: 7px;
            cursor: pointer;
        }
        .media-box .box i{color: #B2B2B2;}
        .media-box .box:hover{background-color: #f4f6f9; color: var(--green);}
        .media-box .box:hover i{color: var(--green);}
        .media-content img{width: 180px;border: #e7e7eb 1px solid;}
        .media-content .addon-logo{width: 30px;margin-right: 15px;}
        .media-box video{width: 210px;height: 169px;}
    </style>
    <label class="layui-form-label {$form['extra_class']??''}">
        {if condition="is_int(strpos($form['extra_attr'], 'required'))"}
        <span class="text-danger">*</span>
        {/if}
        {$form['title']}
    </label>
    <div class="layui-input-block">
        <input type="hidden" name="{$form.name}_type" value="{$form['options']['type'] ?? ''}">
        <input type="hidden" name="{$form.name}_id" value="{$form['options']['id'] ?? ''}">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="media-content">
                        <!--选中结果-->
                        {if condition="isset($form['options']['id']) && !empty($material)"}
                        {switch $form.options.type}
                        {case text}{$material.content}{/case}
                        {case addon}<img class="addon-logo" src="{$material.logo}">{$material.name}{/case}
                        {case image}<img src="{$material.url}">{/case}
                        {case voice}
                        <audio controls>
                            <source src="{$material.url}" type="audio/mpeg">
                            <source src="{$material.url}" type="audio/wma">
                            <source src="{$material.url}" type="audio/wav">
                            <source src="{$material.url}" type="audio/amr">
                            您的浏览器不支持 audio 元素。
                        </audio>
                        {/case}
                        {case music}
                        <audio controls>
                            <source src="{$material.url}" type="audio/mpeg">
                            <source src="{$material.url}" type="audio/wma">
                            <source src="{$material.url}" type="audio/wav">
                            <source src="{$material.url}" type="audio/amr">
                            您的浏览器不支持 audio 元素。
                        </audio>
                        {/case}
                        {case video}
                        <video style="width: 210px;height: 169px;" controls>
                            <source src="{$material.url}"  type="video/mp4">
                            <source src="{$material.url}"  type="video/ogg">
                            您的浏览器不支持 HTML5 video 标签。
                        </video>
                        {/case}
                        {case news}
                            <div style="width: 250px;overflow: hidden;border: 1px solid #e8e9eb;padding: 12px 14px;">
                                <p>{$material.title}</p>
                                <img style="width: 248px;height: 138px;" src="{$material.cover_url}?imageView2/2/w/248" alt="">
                                {if count($material.children)}
                                {volist name="material.children" id="c"}
                                <div class="items">
                                    <div class="layui-row" style="padding: 5px 0;">
                                        <div class="layui-col-xs8">
                                            <p>{$c.title}</p>
                                        </div>
                                        <div class="layui-col-xs4 tr">
                                            <img style="width: 70px;height: 70px;" src="{$c.cover_url}?imageView2/2/w/70" alt="">
                                        </div>
                                    </div>
                                </div>
                                {/volist}
                                {else /}
                                <p>{$material.digest}</p>
                                {/if}
                            </div>
                        {/case}
                        {/switch}
                        {/if}
                    </div>
                    <hr {if condition="!isset($form['options']['id'])"} style='display: none;' {/if}>

                    <?php foreach($form['options']['types'] as $k => $type):?>
                    <div class="layui-col-xs6 layui-col-md3">
                        <div class="box" data-type="{$k}" data-type-title="{$type}">
                            <i class="fa fa-<?php
                                $icons=['text'=>'pencil','image'=>'image','news'=>'drivers-license','voice'=>'file-sound-o','music'=>'music','video'=>'file-video-o','addon' => 'cube'];
                                echo $icons[$k];
                            ?>
                            "></i>&nbsp;<?= $type;?>
                        </div>
                    </div>
                    <?php endforeach;?>
                </div>
            </div>
        </div>
    </div>

    <script>
        if(typeof setNewsValue === 'undefined'){
            var getContent = function (id) {
                var html = '';
                $.ajax({
                    url: "{:url('mp/material/getNewsDetail')}",
                    type: 'post',
                    data: {id: id},
                    async: false, // 同步
                    success: function (res) {
                        if(res.code === 1){
                            var media = res.data.media;
                            html = '<div style="width: 250px;overflow: hidden;border: 1px solid #e8e9eb;padding: 12px 14px;">\n' +
                                    '                                <p>'+media.title+'</p>\n' +
                                    '                                <img style="width: 248px;height: 138px;" src="'+media.cover_url+'?imageView2/2/w/248" alt="">\n';
                            if(media.children.length > 0){
                                for(var i=0;i < media.children.length; i++){
                                    html = html + '<div class="items"><div class="layui-row" style="padding: 5px 0;">\n' +
                                            '                                        <div class="layui-col-xs8">\n' +
                                            '                                            <p>'+media.children[i].title+'</p>\n' +
                                            '                                        </div>\n' +
                                            '                                        <div class="layui-col-xs4 tr">\n' +
                                            '                                            <img style="width: 70px;height: 70px;" src="'+media.children[i].cover_url+'?imageView2/2/w/70" alt="">\n' +
                                            '                                        </div>\n' +
                                            '                                    </div>\n' +
                                            '                                </div>';
                                }
                            }else{
                                html = html + '<p>'+media.digest+'</p>';
                            }

                        }
                    }
                });
                return html;
            };
            var setNewsValue = function(res, field){
                $("input[name={$form.name}_id]").val(res[0].id);
                $("input[name={$form.name}_type]").val("news");
                $("#media-box-{$form.name} .media-content").html(getContent(res[0].id));
                $("#media-box-{$form.name} hr").show();
            };
        }
        if(typeof setAddonValue === 'undefined'){
            var setAddonValue = function(res, field){
                $("input[name={$form.name}_id]").val(res.id);
                $("input[name={$form.name}_type]").val("addon");
                $("#media-box-{$form.name} .media-content").html('<img src="'+res.logo+'" class="addon-logo">'+res.name);
                $("#media-box-{$form.name} hr").show();
            };
        }

        if(typeof setVideoValue === 'undefined'){
            var setVideoValue = function(res, field){
                $("input[name={$form.name}_id]").val(res[0].id);
                $("input[name={$form.name}_type]").val("video");
                $("#media-box-{$form.name} .media-content").html('<video controls>\
                        <source src="url"  type="video/mp4">您的浏览器不支持 HTML5 video 标签。\
                        </video>'.replace("url", res[0].url));
                $("#media-box-{$form.name} hr").show();
            };
        }

        if(typeof setMusicValue === 'undefined'){
            var setMusicValue = function(res, field){
                $("input[name={$form.name}_id]").val(res[0].id);
                $("input[name={$form.name}_type]").val("music");
                $("#media-box-{$form.name} .media-content").html('<audio controls>\
                        <source src="url" type="audio/mpeg">\
                        <source src="url" type="audio/wma">\
                        <source src="url" type="audio/wav">\
                        <source src="url" type="audio/amr">您的浏览器不支持 audio 元素。\
                    </audio>'.replace("url", res[0].url));
                $("#media-box-{$form.name} hr").show();
            };
        }

        if(typeof setVoiceValue === 'undefined'){
            var setVoiceValue = function(res, field){
                $("input[name={$form.name}_id]").val(res[0].id);
                $("input[name={$form.name}_type]").val("voice");
                $("#media-box-{$form.name} .media-content").html('<audio controls>\
                        <source src="url" type="audio/mpeg">\
                        <source src="url" type="audio/wma">\
                        <source src="url" type="audio/wav">\
                        <source src="url" type="audio/amr">您的浏览器不支持 audio 元素。\
                    </audio>'.replace("url", res[0].url));
                $("#media-box-{$form.name} hr").show();
            };
        }

        if(typeof setTextValue === 'undefined'){
            var setTextValue = function(res, field){
                $("input[name={$form.name}_id]").val(res.id);
                $("input[name={$form.name}_type]").val("text");
                $("#media-box-{$form.name} .media-content").html(res.content);
                $("#media-box-{$form.name} hr").show();
            };
        }

        if(typeof setPictureValue === 'undefined'){
            var setPictureValue = function(res, field){
                $("input[name={$form.name}_id]").val(res[0].id);
                $("input[name={$form.name}_type]").val("image");
                $("#media-box-{$form.name} .media-content").html("<img src='"+res[0].url+"' />");
                $("#media-box-{$form.name} hr").show();
            };
        }

        $("#media-box-{$form.name}").on('click', '.box', function () {
            var type = $(this).data('type');
            var content = (type === 'news' ? ('/mp/material/handle?type=' + type +'&field=$form["name"]&needmp=1')
                    : ['/mp/material/handle?type=' + type +'&field=$form["name"]&needmp=1', 'no']);
            layer.open({
                type: 2,
                title: $(this).data('type-title'),
                shadeClose: false,
                shade: 0.8,
                area: ['960px', '576px'],
                content: content //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    </script>
</div>